<script setup lang="ts">
import {StIconIconifyOffline, StIconIconify} from "st-common-ui-vue3"
import {ref} from "vue";

const onLoadHandler = (iconName: string) => {
  console.log(`Icon ${iconName} loaded`)
}

const icon = ref('fluent-emoji:baby-chick')
setTimeout(() => {
  icon.value = 'fluent-emoji:baby-bottle'
  console.log('icon changed')
}, 1000)
</script>

<template>
  <div class="st-icon-iconify-test">
    <StIconIconify :icon="icon" :width="128" :height="128" :on-load="onLoadHandler" />
    <StIconIconifyOffline :icon="icon" :width="128" :height="128" :on-load="onLoadHandler" />
  </div>
</template>

<style scoped lang="scss">

</style>
